<template>
  <div class="div">
    <div class="itemdiv" v-for="(item,index) in search()" :key="index" @click="xq(item.blog.id)">
      <h3 class="title">{{item.blog.title}}</h3>
      <div class="zuozhelan">
        <el-avatar
          :src="poot+'manongyizhanFile/users/'+item.blog.users.users.mailbox+'/头像/'+item.blog.users.users.mailbox+'.jpg'"
        ></el-avatar>
        <font class="font">{{item.blog.users.users.nickname}}</font>
        <div class="data">
          <div class="imgdiv">
            <img src="@/assets/yanjing.png" title="浏览量" alt class="img" />&nbsp;&nbsp;
            <font class="fonticon">{{item.blog.browse}}</font>
          </div>
          <div class="imgdiv">
            <img src="@/assets/pinglun.png" title="评论量" alt class="img" />&nbsp;&nbsp;
            <font class="fonticon">{{item.blog.comment}}</font>
          </div>
          <div class="imgdiv">
            <img src="@/assets/zan.png" title="点赞" class="img" />&nbsp;&nbsp;
            <font class="fonticon">{{item.blog.fabulous}}</font>
          </div>
          <div class="imgdiv">
            <img src="@/assets/shoucang.png" title="收藏" class="img" />&nbsp;&nbsp;
            <font class="fonticon">{{item.blog.collection}}</font>
          </div>
        </div>
      </div>

      <hr size="1" color="#999" style="border:1 solid #999" />
    </div>
    <div v-if="index!=leixing">{{chushihua()}}</div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      list: [],
      index: 0
    };
  },
  methods: {
    xq(id) {
      this.$router.push("/blog/" + id);
    },
    chushihua() {
      this.index = this.leixing;
      this.$http
        .get(this.poot + "selectblogBytype" + "/" + this.leixing)
        .then(response => {
          this.list = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
        search() {
      return this.list.filter(item => {
        if (item.blog.title.includes(this.blogsousuo)) {
          return item;
        }
      });
    },
  },
  computed: {
    ...mapState(["leixing"]),
    ...mapState(["poot"]),
    ...mapState(["user"]),
    ...mapState(["blogsousuo"])
  },
  mounted() {
    this.chushihua();
  }
};
</script>
<style scoped>
img {
  height: 30px;
}
.data {
  display: flex;
  margin-left: 50px;
}
.imgdiv {
  display: flex;
  align-items: center;
  width: 100px;
}
.title {
  color: #354b7b;
}
.icondiv {
  margin-left: 60%;
}
.icon {
  height: 20px;
  width: 20px;
}
hr {
  margin-top: 5px;
  width: 95%;
}
.itemdiv {
  margin-left: 5%;
  margin-top: 15px;
}
.zuozhelan {
  margin-top: 5px;
  display: flex;
  align-items: center;
}
.font {
  margin: 0;
  margin-left: 10px;
  width: 150px;
}
.div::-webkit-scrollbar {
  display: none;
}
.div {
  overflow: auto;
  height: 595px;
}
</style>